<template>
  <div class="list">
    <div class="header flex">
      <p class="font-14"></p>
      <p class="font-14"></p>
      <p class="font-14"></p>
      <p v-if="type != 3" class="font-14">曝光量</p>
      <p class="font-14">点赞数</p>
      <p class="font-14">评论数</p>
      <p class="font-14">互动率</p>
    </div>
    <div class="body">
      <div v-for="(item, index) in list" :key="item.id" class="item flex flex-align-items-center pointer">
        <div class="item-index flex-center flex-align-items-center">
          <img v-if="index === 0" src="@/assets/one.png">
          <img v-else-if="index === 1" src="@/assets/two.png">
          <img v-else-if="index === 2" src="@/assets/three.png">
          <span v-else class="font-20-B">0{{ index + 1 }}</span>
        </div>
        <div class="item-img flex">
          <img :src="item.img">
          <p class="flex-center flex-align-items-center">
            <i class="iconfont icon-bofang"></i>
          </p>
        </div>
        <div class="item-info">
          <p class="item-title ellipsis-2 font-16-B">{{ item.name }}</p>
          <div class="item-bottom flex flex-align-items-center">
            <p class="flex flex-align-items-center">
              <img :src="item.img">{{ item.name }}
            </p>
            <p class="flex flex-align-items-center">
              <i class="iconfont icon-shijian"></i>{{ item.time }}
            </p>
          </div>
        </div>
        <p v-if="type != 3" class="item-num font-16-B" :class="{ active: tab === '曝光量排行' }">{{
          numConvert(item.count, 2) }}</p>
        <p class="item-num font-16-B" :class="{ active: tab === '点赞量排行' }">{{ numConvert(item.count, 2)
        }}</p>
        <p class="item-num font-16-B" :class="{ active: tab === '评论量排行' }">{{ numConvert(item.count, 2)
        }}</p>
        <p class="item-num font-16-B" :class="{ active: tab === '互动率排行' }">{{ numConvert(item.count, 2)
        }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import numConvert from '@/js/numConvert.js';

const props = defineProps(['list', 'tab', 'type']);
</script>

<style lang="less" scoped>
.list {
  .header {
    margin-bottom: 10px;
    background: #f9f9f9;

    p {
      height: 54px;
      text-align: center;
      line-height: 54px;
      color: #666;
      flex: 1 1 0%;

      &:nth-child(1) {
        flex: 0 0 70px;
      }

      &:nth-child(2) {
        flex: 0 0 120px;
      }

      &:nth-child(3) {
        flex: 0 0 400px;
      }
    }
  }

  .body {
    .item {
      height: 100px;
      padding: 15px 0;
      transition: all .3s;

      &:hover {
        transform: translateY(-6px);
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 0 #f2f3f5;
        border-radius: 10px;
      }

      .item-index {
        width: 70px;

        img {
          width: 32px;
          height: 32px;
        }

        span {
          color: #bbb;
        }
      }

      .item-img {
        position: relative;
        width: 120px;

        img {
          width: 116px;
          height: 70px;
        }

        p {
          position: absolute;
          width: 30px;
          height: 30px;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          overflow: hidden;

          &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.4;
          }

          &:hover {
            &::before {
              background: @main-color;
              opacity: 1;
            }
          }

          i {
            position: relative;
            z-index: 10;
            color: #fff;
          }
        }
      }

      .item-info {
        width: 400px;
        padding-left: 14px;

        .item-title {
          color: #333;
          margin-bottom: 8px;
        }

        div {
          p {
            color: #666;
            margin-right: 16px;

            img {
              width: 16px;
              height: 16px;
              border-radius: 50%;
              margin-right: 8px;
            }

            i {
              color: #666;
            }
          }
        }
      }

      .item-num {
        flex: 1 1 0%;
        text-align: center;
        color: #333;

        &.active {
          color: @main-color;
        }
      }
    }
  }
}
</style>